<template>
  <div style="width: 100%">
    <el-form
      ref="form"
      :disabled="disabled"
      :model="formDataAll"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-collapse v-model="activeName">
        <el-collapse-item title="基础信息" :name="0">
          <el-row>
            <el-col :span="12">
              <el-form-item label="事件名称：" prop="messageName">
                <el-input v-model="formDataAll.messageName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件编码：" prop="messageCode">
                <el-input
                  v-model="formDataAll.messageCode"
                  :disabled="dialogType !== 'add'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="提交人：" prop="author">
                <el-select size="small" v-model="formDataAll.author">
                  <el-option
                    v-for="val in userList"
                    :key="val.pid"
                    :value="val.pid"
                    :label="val.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="规则配置：" :name="1">
          <el-row>
            <el-col :span="12">
              <el-form-item label="调用方式：" prop="isSync">
                <el-select v-model="formDataAll.isSync">
                  <el-option label="同步" :value="0">同步</el-option>
                  <el-option label="异步" :value="1">异步</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通知规则：" prop="executorRouteStrategy">
                <el-select v-model="formDataAll.executorRouteStrategy">
                  <el-option
                    v-for="item in routeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div class="contain-box" style="padding: 0 20px">
              <el-checkbox v-model="formDataAll.response">回执：</el-checkbox>
            </div>
          </el-row>
          <el-row>
            <el-form-item label="" prop="executorParam">
              <code-editor
                :mode="'javascript'"
                :readonly="disabled"
                v-model="formDataAll.executorParam"
                ref="ecEditor"
              ></code-editor>
              <!-- <el-input v-model="formDataAll.executorParam" :disabled="disabled" type="textarea"></el-input> -->
            </el-form-item>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div class="md-component-btns">
      <el-button
        size="medium"
        :disabled="disabled"
        type="primary"
        @click="save"
        :loading="loading"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import CodeEditor from "@/components/code-editor/index";
import * as api from "@/api/eventManage/index";
import * as common from "@/api/common";

export default {
  name: "taskConfigTemp",
  components: {
    CodeEditor,
  },

  data() {
    return {
      activeName: [0, 1, 2, 3],
      serverList: [],
      userList: [],
      dialogType: "add",
      currentData: {},
      formDataAll: {},
      rules: {
        messageName: [
          {
            required: true,
            message: "请输入事件名称",
            trigger: "blur",
          },
        ],
        messageCode: [
          {
            required: true,
            message: "请输入事件编码",
            trigger: "blur",
          },
        ],
        author: [
          {
            required: true,
            message: "请输入负责人",
            trigger: "blur",
          },
        ],

        isSync: [
          {
            required: true,
            message: "请选择调用方式",
            trigger: "blur",
          },
        ],
        executorRouteStrategy: [
          {
            required: true,
            message: "请选择通知规则",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      routeList: [
        {
          label: "第一个",
          value: "FIRST",
        },
        {
          label: "最后一个",
          value: "LAST",
        },
        {
          label: "单-轮询",
          value: "ROUND",
        },
        {
          label: "单-随机",
          value: "RANDOM",
        },
        {
          label: "故障转移",
          value: "FAILOVER",
        },
        {
          label: "忙碌转移",
          value: "BUSYOVER",
        },
        {
          label: "一致性哈希",
          value: "CONSISTENT_HASH",
        },
        {
          label: "最不经常使用",
          value: "LEAST_FREQUENTLY_USED",
        },
        {
          label: "最近最久未使用",
          value: "LEAST_RECENTLY_USED",
        },
        {
          label: "全部",
          value: "SHARDING_BROADCAST",
        },
      ],
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    getUserList() {
      common.getUserList().then((res) => {
        this.userList = res.data.data;
      });
    },
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          const paramData = {
            ...this.formDataAll,
          };
          if (this.dialogType === "add") {
            delete paramData.id;
          }
          if (paramData.updateTime) {
            delete paramData.updateTime;
            delete paramData.addTime;
            delete paramData.glueUpdatetime;
          }
          //executorParam json校验
          if (paramData.executorParam) {
            try {
              const executorParam = JSON.parse(paramData.executorParam);
            } catch (err) {
              this.$message.error("请输入正确的JSON格式");
              return;
            }
          }

          let method = this.dialogType === "add" ? "add" : "update";
          let msg = this.dialogType === "add" ? "新增" : "编辑";
          api[method](paramData).then(() => {
            this.loading = false;
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          });
        }
      });
    },

    open(row) {
      this.dialogType = "add";
      if (row) {
        this.formDataAll = {
          ...this.formDataAll,
          ...row,
        };
      }
    },
    edit(row) {
      this.dialogType = "edit";
      this.formDataAll = {
        ...row,
      };
    },
    view(row) {
      this.dialogType = "view";
      this.formDataAll = {
        ...row,
      };
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>
